import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Route, Switch } from 'react-router-dom'
import { NavBar } from 'antd-mobile'
import  NavLinkBar  from '../navlink/navlink'
import Boss from '../boss/boss'
import Genius from '../genius/genius'
import User from '../user/user'


function Msg(){
  return <h1>消息列表</h1>
}

@connect(
  state=>state
)
class Dashboard extends Component{
  render(){
    const {pathname} = this.props.location
    const user = this.props.user
    const navList = [
      {
        path:'/boss',
        text:'牛人',
        icon:'boss',
        title:'牛人列表',
        component:Boss,
        hide:user.type==='genius' //false
      },
      {
        path:'/genius',
        text:'boss',
        icon:'job',
        title:'BOSS列表',
        component:Genius,
        hide:user.type==='boss' //false
      },
      {
        path:'/msg',
        text:'消息',
        icon:'msg',
        title:'消息列表',
        component:Msg,
      },
      {
        path:'/me',
        text:'我',
        icon:'user',
        title:'个人中心',
        component:User,
      }
    ]
    return (
      <div>
        <NavBar className='fixd-header' mode='dard'>{navList.find(d => d.path===pathname).title}</NavBar>
        <div style={{marginTop:45,marginBottom:45}}>
          <Switch>
            {navList.map(d =>(
              <Route key={d.path} path={d.path} component={d.component}></Route>
            ))}
          </Switch>
        </div>
        <div className='m-footer'>
          <NavLinkBar data={navList}></NavLinkBar>
        </div>
      </div>
    )
  }
}

export default Dashboard